import React, { Component } from "react";
import PropTypes from "prop-types";
import { nanoid } from "nanoid";

import "./index.css";

export default class Header extends Component {
    static propTypes = {
        addTodo: PropTypes.func.isRequired,
    };

    handleKeyUp = (event) => {
        const { target, keyCode } = event;

        if (keyCode !== 13) {
            return;
        }

        const value = target.value;
        if (value == null || value.trim().length === 0) {
            alert("输入不能为空");
            return;
        }

        const todo = {
            id: nanoid(),
            name: value.trim(),
            done: false,
        };
        this.props.addTodo(todo);

        target.value = "";
    };

    render() {
        return (
            <div className="todo-header">
                <input
                    type="text"
                    placeholder="请输入你的任务名称，按回车键确认"
                    onKeyUp={this.handleKeyUp}
                />
            </div>
        );
    }
}
